---
layout: single
property_name: text-shadow
---

<section id="text-shadow" class="property">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/typography/">
          In collection: <strong>typography</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/text-shadow/" data-property-name="text-shadow" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="text-shadow">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/text-shadow" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#text-shadow"><span>#</span>text-shadow</a>
    </h2>
    <div class="property-description">
      <p>Defines the shadow of the text content.</p>

    </div>

  </header>





    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-shadow: none;">text-shadow: none;</code>
        </p>
        <div class="example-description">
          <p>The text content has <strong>no shadow</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-shadow " id="text-shadow-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-shadow-none{ text-shadow:none;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-shadow: 2px 6px;">text-shadow: 2px 6px;</code>
        </p>
        <div class="example-description">
          <p>You need at least <strong>two values</strong>:</p>
<ul><li>the first is the <em>horizontal</em> offset</li><li>the second is the <em>vertical</em> offset</li></ul><p>The shadow color will be inherited from the text color.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-shadow " id="text-shadow-2px-6px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-shadow-2px-6px{ text-shadow:2px 6px;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-shadow: 2px 6px red;">text-shadow: 2px 6px red;</code>
        </p>
        <div class="example-description">
          <p>You can define a <strong>color</strong> as the <em>last</em> value.</p>
<p>As with <code class="shorthand"><a href="http://cssreference.io/#color">color</a></code>, you can use color names, hexadecimal, rgb, hsl...</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-shadow " id="text-shadow-2px-6px-red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-shadow-2px-6px-red{ text-shadow:2px 6px red;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-shadow: 2px 4px 10px red;">text-shadow: 2px 4px 10px red;</code>
        </p>
        <div class="example-description">
          <p>The optional <strong>third value</strong> defines the <strong>blur</strong> of the shadow.</p>
<p>The color will be diffused across 10px in this example, from opaque to transparent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-shadow " id="text-shadow-2px-4px-10px-red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-shadow-2px-4px-10px-red{ text-shadow:2px 4px 10px red;}</style>
    </section>

</section>
